<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            background-color: #0bd;
        }
    </style>
</head>

<body>

</body>

</html>

<script>
    const canvas = document.createElement("canvas");
    canvas.width = 600;
    canvas.height = 400;
    document.body.append(canvas);
    const context = canvas.getContext("2d");
    context.strokeStyle = 'red';
    context.moveTo(300, 0);
    context.lineTo(300, 400);
    context.stroke();

    const g = context.createLinearGradient(0, 0, 600, 0)
    g.addColorStop(0, 'red')
    g.addColorStop(1, 'yellow')


    context.fillStyle = g;
    // 文字的控制方向
    context.direction = 'ltr'; // left to right从左到右(起点在左边) rtl(从右到左，起点在右边)

    context.font = 'italic 30px Arial';

    // 修改文本的对齐方式textAlign属性是以起点为对齐的位置
    // context.textAlign = 'left';
    // context.textAlign = 'right';
    // context.textAlign = 'center';
    // context.textAlign = 'start'; // start 以direction的开始方向为方向
    // context.textAlign = 'end';


    context.fillText('wolfcode.cn', 300, 100);




</script>